<template>
    <div>
      <div style="background: black;width: 100%;color: white">
        <span style="margin-left: 72%">|</span>
        <el-link href="/#/login2" v-if="this.userId==null" :underline="false" class="tlinks" >登陆</el-link>
        <el-link href="/#/login2" v-if="this.userId==null" :underline="false" class="tlinks">注册</el-link>
        <el-link href="/#/myCourses" v-else :underline="false" class="tlinks">我的课程</el-link>
        <el-link href="/#/Recruit" :underline="false" class="tlinks">讲师招募</el-link>
      </div>
      <div style="height: 90px;width: 1500px;padding:10px 0;margin: 0 auto;">
          <ul id="ul1">
            <li style="margin-top: 1%"><router-link to="/"><el-link :underline="false" class="links" ><img src="../../assets/img/logo.jpg" width="153px" height="52px" /></el-link></router-link></li>
            <li style="margin-left: 2%"><router-link to="/"><el-link :underline="false" class="links" >首页</el-link></router-link></li>
            <li><router-link to="/Course"><el-link :underline="false" class="links">课程中心</el-link></router-link></li>
            <li><el-link :underline="false" class="links" >SVIP会员</el-link></li>
            <li><el-link :underline="false" class="links">订单管理</el-link></li>
            <li><el-link :underline="false" class="links">讲师招募</el-link></li>
          </ul>
      </div>
      <div style="border-bottom:1px solid #D7D7D7 "></div>
    </div>
</template>

<script>
    export default {
        name: "OutlineNavBar",
        data() {
          return {
            userId:sessionStorage.getItem("uid"),
            input1: ''
          }
        }
    }
</script>

<style scoped>
  ul{
    width: 80%;
    margin-left: 10%;
  }
  #ul1 li{
    float: left;
    list-style-type: none;
    margin-right:2%;
    margin-top: 2%;
  }
  a {
    text-decoration: none;
  }
  .links {
    font-size: 16px;
  }
  .tlinks{
    color: white;
  }
  .tlinks:hover{
    color: white;
  }
  .links:hover {
    color:red;
  }
</style>
